<div class="message_container">  
  <div class="row">
    <div class="col-md-7"><button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal">发布资讯</button></div>
    <div class="form-item col-md-2">
      <label for="">所属栏目</label>
      <select name="parentId" id="" class="user_search_text">
        <!-- 遍历生成 -->
        <option value="" class="val">请选择所属栏目</option>
      </select>   
    </div>
    <div class="form-item col-md-3">
      <label for="">标题</label>
      <input type="text" name="no" class="user_search_text"> 
      <button type="button" class="btn btn-link">搜索</button>
    </div> 
  </div>
  <div class="row">
    <table class="table" >
      <thead >
        <th>序号</th>
        <th>标题</th>
        <th></th>
        <th>发布日期</th>
        <th>所属栏目</th>
        <th>操作</th>
      </thead>
      <tbody>
         
      </tbody>
    </table>
  </div> 
</div>

<style>
  label{
    color: #666;
    font-size: 14px;
  }
  .message_container select,.message_container input{
      
      height: 32px;
      line-height: 32px;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
    }
</style>
<script>
  var baseUrl='http://47.94.229.139:7788/';
  var page=1;
  var pageSize=15;  
  //通过promise封装请求函数
  function getData(type,url){
    var p=new Promise((resolve,reject)=>{
      //执行异步请求
      $.ajax({
        url:url,
        type:type,
        headers:{
          "Authorization":sessionStorage.getItem('token'),
        },
        success:function(data){
          resolve(data);
        }
      })
    })
    return p;
  }
  function getMassageData(url){
  //查询所有资讯信息
  return getData('get',baseUrl+url).then(function(data){
    console.log(data);
    //数据处理
    data.data.list.forEach((item)=>{
        $(".message_container tbody").append(`<tr style="text-align: left;">
            <td >`+item.id+`</td>
            <td>`+item.title+`</td>
            <td></td>
            <td>`+item.publishTime+`</td>
            <td>`+item.category.name+`</td>
            
            <td>
                <span class="select">查看</span>
              
                <span data-toggle="modal" data-target="#exampleModal">编辑</span>
              
                <span class="deleteById">删除</span>
              
            </td>
            </tr>`);
        });
      });
  }
  getMassageData('article/pageQuery?page=1&pageSize=15');
  //1.发送请求--请求所属栏目信息   
  getData('get',baseUrl+'category/findAll').then(function(data){
    console.log(data);
    //数据处理
    data.data.forEach((item)=>{
        $('.message_container .val').after(`<option>`+item.name+`</option>`);
    });
  });
  //给搜索按钮绑定事件
  $(".message_container .btn-link").click(()=>{
    //1.获取用户数据
    var title=$(".user_search_text").eq(1).val();
    //console.log($(".user_search_text"))
    //console.log(categoryId,title)
    //2.判断用户输入
    if(title==''){
      url='article/pageQuery?page=1&pageSize=15';
    }else{
      url='article/pageQuery?page=1&pageSize=15&title='+title;
    }
    //console.log(url)
    //3.发送请求
    $('.message_container tbody').empty();
    getMassageData(url);
  })
  //给删除按钮绑定事件
  $('.message_container tbody').on('click','.deleteById',(event)=>{
  id=$(event.target).parent().parent().children().eq(0).text();
  //console.log(id);
  //删除当前行
    if (confirm("是否确定删除当前行")){
      getData('get',baseUrl+'article/deleteById?id='+id).then((res)=>{
        alert('删除成功');
          //清空所有tr
          $("tbody").empty();
          //3.刷新页面
          getMassageData('article/pageQuery?page=1&pageSize=15');    
      })
    }
  }) 
</script>